<template>
  <div id="app">
    <div class="box">
      <el-date-picker v-model="search.StarTime" type="datetime" placeholder="开始时间"></el-date-picker> -
      <el-date-picker v-model="search.EndTime" type="datetime" placeholder="结束时间"></el-date-picker>

      <el-input class="l-input" style="margin-left: 20px;" v-model="search.keyWords" placeholder="关键字搜索"></el-input>
      <el-button type="primary" class="l-margin-l15" v-on:click="onserach()">查询</el-button>
    </div>
    <div class="box">
      <el-table :data="list" border  :height="`calc(100vh - 305px)`"   :highlight-current-row="true">

        <el-table-column label="登录时间" align="center">
          <template slot-scope="scope">
            {{ scope.row.createTime }}
          </template>
        </el-table-column>
        <el-table-column label="登录账号" align="center">
          <template slot-scope="scope">
            {{ scope.row.name }} （{{ scope.row.accountNo }}）
          </template>
        </el-table-column>
        <el-table-column label="登录密码" align="center">
          <template slot-scope="scope">
            {{ scope.row.pwd }}
          </template>
        </el-table-column>
        <el-table-column label="登录状态" align="center">
          <template slot-scope="scope">
             <div v-if="scope.row.loginState=='登录失败'" style="color: red;font-weight: bold;">{{ scope.row.loginState }}</div> 
             <div v-else-if="scope.row.loginState=='登录成功'" style="color: green;font-weight: bold;">{{ scope.row.loginState }}</div> 
             <div v-else>{{ scope.row.loginState }}</div> 
          </template>
        </el-table-column>
        <el-table-column label="登录方式" align="center">
          <template slot-scope="scope">
            {{ scope.row.loginAction }}
          </template>
        </el-table-column>
        <el-table-column label="登录IP" align="center">
          <template slot-scope="scope">
            {{ scope.row.loginIP }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="height: 10px">&nbsp;</div>
    <div class="box">
      <el-pagination v-on:size-change="handleSizeChange" v-on:current-change="handleCurrentChange"
        v-bind:current-page="currentPage" v-bind:page-sizes="[10, 20, 30, 40]" v-bind:page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper" v-if="reflushPageFlag" v-bind:total="total">
      </el-pagination>
    </div>

  </div>
</template>

<script>

import { GetLoginLogList } from '@/service/systemapi';
export default {

  data() {
    return {
      list: [],
      search: {
        keyWords: "",
        StarTime: "",
        EndTime: ""
      },
      //分页 开始
      currentPage: 1,
      pagesize: 10,
      total: 0,
      reflushPageFlag: true,
      //分页 结束

    };
  },
  created() {
    this.InitData();

  },
  watch: {},
  methods: {
    onserach() {
      this.currentPage = 1;
      this.getList();
    },
    //初始化
    InitData() {
      this.getList();
    },
    //查询列表
    getList() {
      this.openLoading();
      this.list = [];
      var that = this;

      let jsondata = {
        PageIndex: this.currentPage,
        PageSize: this.pagesize,
        keyWords: this.search.keyWords,
        StarTime: this.search.StarTime,
        EndTime: this.search.EndTime,
      };
      GetLoginLogList(jsondata)
        .then((res) => {

          if (res.success) {
            if (res.data != undefined) {
              that.list = res.data.list;
              that.total = res.data.total;

              that.$nextTick(function () {
                that.reflushPageFlag = true;
              });
            }
          } else {
            that.$message.error(res.msg);
          }

          that.closeLoading();
        })
        .catch((err) => {
          this.$message.error("数据请求异常");
          that.closeLoading();
        });
    },
    //当前条
    handleSizeChange(val) {
      this.pagesize = val;
      this.getList();
    },
    //当前页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getList();
    },
   
  },
};
</script>

<style scoped>
#app {
  /* padding: 20px; */
  /* background:-webkit-linear-gradient(left,#03a9f4,#f44336); */
}

.l-input {
  display: inline-block;
  width: 260px;
}

.l-input-form {
  display: inline-block;
  width: 220px;
}

.l-margin-l15 {
  margin-left: 15px;
}

.l-red {
  color: red;
}
</style>